<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>论坛详情 - 在线论坛</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../elementui/elementui.css">
  <link rel="stylesheet" href="../../css/font-awesome.min.css">
  <link href="quill.css" rel="stylesheet">
  <style>
  .section {
    width: 900px;
    margin: 0 auto;
  }

  .section-content {
    margin-top: 30px;
  }
  .content-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
  }
  .content-sub-title {
    text-align: center;
    margin-top: 20px;
    color: #888888;
    font-size: 14px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .header-block {
    height: 50px;
    line-height: 50px;
    display: flex;
  }
  .userinfo {
    align-self: center;
    margin-left: 15px;
  }
  .content-block-ask {
    margin: 15px 0 20px 65px;
  }
  .content-detail img {
    max-width: 900px;
    height: auto;
  }
  .operate{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 40px;
  }
  /* 修改对话框样式 */
  .comment-dialog .el-dialog {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  .comment-dialog .el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
  }
  .comment-dialog .el-dialog__title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  .comment-dialog .el-dialog__body {
    padding: 20px;
  }
  .comment-dialog .el-dialog__footer {
    padding: 10px 20px;
    border-top: 1px solid #f0f0f0;
  }
  /* 主体内容样式优化 */
  .forum-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    margin-bottom: 20px;
  }
  .comment-item {
    transition: all 0.3s;
  }
  .comment-item:hover {
    transform: translateX(5px);
  }
  .ql-editor {
    min-height: 200px;
  }
  
  /* 抽取的行内样式 */
  .main-container {
    width: 100%;
    margin: 20px auto 40px;
    position: relative;
    background: rgb(255, 255, 255);
  }
  
  .nav-header {
    width: 100%;
    line-height: 54px;
    text-align: center;
    background: #333;
    height: 54px;
  }
  
  .nav-title {
    padding: 0 20px;
    color: #fff;
    text-align: center;
    background: none;
    display: inline-block;
    width: auto;
    font-size: 20px;
  }
  
  .back-button-container {
    padding: 20px 7%;
    margin: 0px auto;
    border-color: #ddd;
    border-radius: 0px;
    background: none;
    border-width: 0 0 1px;
    width: 100%;
    border-style: solid;
  }
  
  .forum-content-container {
    width: 90%;
    margin: 20px auto;
    padding: 20px;
    position: relative;
    background: none;
    border-radius: 8px;
  }
  
  .content-title-style {
    padding: 0 10px;
    margin: 0 0 10px;
    color: #333;
    text-align: center;
    width: 100%;
    line-height: 32px;
    font-size: 22px;
  }
  
  .user-info-container {
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 10px 0;
  }
  
  .user-name-style {
    color: #999;
    text-align: right;
    font-size: 14px;
    margin-right: 20px;
  }
  
  .publish-time-style {
    color: #999;
    text-align: left;
    font-size: 14px;
  }
  
  .operate-container {
    padding: 10px;
    align-items: center;
    text-align: right;
    background: none;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
  }
  
  .like-container {
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
  }
  
  .like-icon {
    margin: 0 2px 0 0;
    line-height: 40px;
    font-size: 14px;
    color: #333;
  }
  
  .like-text {
    color: #333;
    line-height: 40px;
    font-size: 14px;
  }
  
  .content-style {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
  }
  
  .comments-container {
    border: 1px solid #eee;
    width: 100%;
    padding: 20px;
    margin: 20px auto;
    background: #fcfcfc;
    border-radius: 8px;
  }
  
  .comments-header {
    padding: 0 0 20px 0;
    border-color: #efefef;
    align-items: center;
    border-width: 0 0 1px 0;
    display: flex;
    width: 100%;
    border-style: solid;
    justify-content: space-between;
  }
  
  .comments-title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
  }
  
  .comment-button {
    cursor: pointer;
    border: 0;
    padding: 0px 15px;
    margin: 0 10px 0 0;
    outline: none;
    color: #fff;
    border-radius: 4px;
    background: #F5BB00;
    width: auto;
    font-size: 14px;
    line-height: 32px;
    height: 32px;
  }
  
  .comment-icon {
    color: #fff;
    margin: 0 4px 0 0;
    font-size: 14px;
  }
  
  .comments-list {
    width: 100%;
    padding: 0px;
    background: none;
  }
  
  .comment-item-style {
    border: 1px solid #eee;
    padding: 15px;
    margin: 20px 0;
    align-items: center;
    color: #666;
    background: #fff;
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .comment-user {
    width: 100%;
    align-items: center;
    display: flex;
    height: auto;
  }
  
  .user-avatar {
    width: 40px;
    margin: 0 10px 0 0;
    border-radius: 100%;
    object-fit: cover;
    height: 40px;
  }
  
  .user-name {
    color: #666;
    font-size: 16px;
    font-weight: bold;
  }
  
  .comment-content {
    border: 1px solid #eee;
    padding: 10px;
    margin: 10px 0px 0px;
    color: #666;
    border-radius: 4px;
    background: none;
    line-height: 24px;
    font-size: 14px;
  }
  
  .comment-actions {
    width: 100%;
    margin: 12px 0 0 0;
    align-items: center;
    justify-content: flex-end;
    display: flex;
    height: auto;
  }
  
  .reply-button {
    border: 0;
    cursor: pointer;
    padding: 0 20px;
    margin: 0 10px;
    outline: none;
    color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    background: #F5BB00;
    width: auto;
    line-height: 32px;
    font-size: 14px;
    height: 32px;
  }
  
  .delete-button {
    border: 0;
    cursor: pointer;
    padding: 0 20px;
    margin: 0 10px;
    outline: none;
    color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    background: #333;
    width: auto;
    line-height: 32px;
    font-size: 14px;
    height: 32px;
  }
  
  .child-comments {
    width: 100%;
    padding: 0 20px;
  }
  
  .child-comment-item {
    padding: 8px 0;
    margin: 20px 0 0 0;
    border-color: #efefef;
    align-items: center;
    color: #666;
    background: #fff;
    border-width: 1px 0 0 0;
    width: 100%;
    border-style: solid;
    height: auto;
  }
  
  .child-user-name {
    color: #333;
    font-size: 16px;
  }
  
  .child-comment-content {
    padding: 0px;
    margin: 4px 0 0;
    color: #666;
    border-radius: 4px;
    background: none;
    line-height: 30px;
    font-size: 14px;
  }
  
  .child-comment-actions {
    width: 100%;
    margin: 0px 0 0 0;
    align-items: center;
    justify-content: flex-end;
    display: flex;
    height: auto;
  }
  </style>
</head>

<body>
  <div id="app">
    <div class="main-container">
      <div class="nav-header">
        <div class="nav-title">在线论坛</div>
      </div>
      <div class="back-button-container">
        <el-button size="mini" @click="backClick">返回</el-button>
      </div>
      <div class="section-content forum-container forum-content-container">
        <div class="content-title content-title-style">{{detail.title}}</div>
        <div class="user-info-container">
          <div class="user-name-style">发布人：{{detail.username}}</div>
          <div class="publish-time-style">发布时间：{{detail.addtime}}</div>
        </div>
        <div class="operate operate-container">
          <div @click="zanClick" class="like-container">
            <span class="icon iconfont icon-guanzhu-zhihui like-icon"></span>
            <span class="like-text">{{zanType?'取消赞':'点赞'}}({{allZan}})</span>
          </div>
        </div>
        <div class="content-style content-detail" v-html="detail.content"></div>
        
        <div class="comments-container">
          <div class="comments-header">
            <div class="comments-title">评论列表</div>
            <el-button class="pub comment-button" @click="addComment">
              <span class="icon iconfont icon-xiugai10 comment-icon"></span>
              点击评论
            </el-button>
          </div>
          <div class="comment comments-list">
            <template v-if="commentList && commentList.length">
              <div class="item comment-item comment-item-style" v-for="item in commentList" :key="item.id" @mouseenter="commentEnter(item.id)" @mouseleave="commentLeave">
                <div class="user comment-user">
                  <img v-if="item.avatarurl" class="user-avatar" :src="baseUrl + item.avatarurl">
                  <div class="name user-name">用户：{{item.username}}</div>
                </div>
                <div class="comment-content" v-html="item.content"></div>
                <div class="btn comment-actions">
                  <el-button class="reply-button" v-if="showIndex==item.id&&showIndex1 == -1" @click="replyClick(item.id)">回复</el-button>
                  <el-button class="delete-button" v-if="showIndex==item.id&&userid==item.userid&&showIndex1 == -1" @click="commentDel(item.id)">删除</el-button>
                </div>
                
                <template v-if="item.childs && item.childs.length">
                  <div class="comment child-comments">
                    <div class="item comment-item child-comment-item" v-for="items in item.childs" :key="items.id" @mouseenter="commentEnter1(items.id)" @mouseleave="commentLeave1">
                      <div class="user comment-user">
                        <img v-if="items.avatarurl" class="user-avatar" :src="baseUrl + items.avatarurl">
                        <div class="name child-user-name">用户：{{items.username}}</div>
                      </div>
                      <div class="child-comment-content" v-html="items.content"></div>
                      <div class="btn child-comment-actions">
                        <el-button class="delete-button" v-if="showIndex==item.id&&userid==items.userid&&showIndex1==items.id" @click="commentDel(items.id)">删除</el-button>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
      
      <el-dialog title="添加评论" :visible.sync="dialogFormVisible" custom-class="comment-dialog" width="600px">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="评论" label-width="60px" prop="content">
            <div id="quill-editor"></div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="addForum('form')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

  <!-- 引入JS -->
  <script src="../../js/vue.js"></script>
  <script src="axios.js"></script>
  <script src="../../elementui/elementui.js"></script>
  <script src="quill.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          baseUrl: '',
          id: '',
          detail: {},
          commentList: [],
          dialogFormVisible: false,
          form: {
            content: '',
            parentid: '',
            userid: localStorage.getItem('frontUserid'),
            username: localStorage.getItem('username'),
            avatarurl: '',
          },
          userid: localStorage.getItem('frontUserid'),
          quill: null,
          rules: {
            content: [
              { required: true, message: '请输入评论', trigger: 'blur' }
            ]
          },
          zanType: false,
          zanForm: {},
          showIndex: -1,
          showIndex1: -1,
          allZan: 0
        }
      },
      created() {
        this.baseUrl = 'http://localhost:8080/springboot1a8gh/';
        
        // 从URL获取id参数
        const urlParams = new URLSearchParams(window.location.search);
        this.id = urlParams.get('id');
        
        // 获取详情数据
        this.getDetail();
      },
      methods: {
        // 初始化富文本编辑器
        initQuillEditor() {
          // 如果已经存在quill实例，先销毁它
          if (this.quill) {
            // 移除quill相关的DOM元素
            const editorContainer = document.querySelector('#quill-editor');
            if (editorContainer) {
              // 清空编辑器容器内容
              editorContainer.innerHTML = '';
              
              // 移除相关的工具栏元素
              const toolbars = document.querySelectorAll('.ql-toolbar');
              toolbars.forEach(toolbar => {
                toolbar.parentNode && toolbar.parentNode.removeChild(toolbar);
              });
            }
          }
          
          const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['image', 'video']
          ];
          
          // 创建Quill实例
          this.quill = new Quill('#quill-editor', {
            modules: {
              toolbar: toolbarOptions
            },
            placeholder: '请输入内容...',
            theme: 'snow'
          });
          
          // 监听编辑器内容变化
          this.quill.on('text-change', () => {
            this.form.content = this.quill.root.innerHTML;
          });
        },
        // 返回按钮
        backClick() {
          history.back();
        },
        
        getDetail() {
          axios.get(this.baseUrl + 'forum/list/' + this.id).then(res => {
            if (res.data.code == 0) {
              this.detail = res.data.data;
              this.commentList = res.data.data.childs;
              this.getZan();
              this.getAllZan();
            }
          });
        },
        getZan() {
          axios.get(this.baseUrl + 'storeup/list', {
            params: {
              page: 1,
              limit: 1,
              type: 21,
              userid: localStorage.getItem('frontUserid'),
              tablename: 'forum',
              refid: this.id
            }
          }).then(res => {
            if (res.data && res.data.code == 0) {
              if (res.data.data.list.length) {
                this.zanType = true;
                this.zanForm = res.data.data.list[0];
              } else {
                this.zanType = false;
              }
            }
          });
        },
        getAllZan() {
          axios.get(this.baseUrl + 'storeup/list', {
            params: {
              page: 1,
              type: 21,
              tablename: 'forum',
              refid: this.id
            }
          }).then(res => {
            if (res.data && res.data.code == 0) {
              this.allZan = Number(res.data.data.total);
            }
          });
        },
        zanClick() {
          if (this.zanType) {
            axios.post(this.baseUrl + 'storeup/delete', [this.zanForm.id]).then(res => {
              if (res.data && res.data.code == 0) {
                this.$message.success('取消成功');
                this.getZan();
                this.getAllZan();
              }
            });
          } else {
            let data = {
              name: this.detail.title,
              picture: '1',
              refid: this.detail.id,
              type: 21,
              tablename: 'forum',
              userid: localStorage.getItem('frontUserid')
            };
            axios.post(this.baseUrl + 'storeup/add', data).then(res => {
              if (res.data && res.data.code == 0) {
                this.$message.success('点赞成功');
                this.getZan();
                this.getAllZan();
              }
            });
          }
        },
        // 新增评论
        addComment() {
          this.form.parentid = this.detail.id;
          this.dialogFormVisible = true;
          // 清空编辑器内容
          this.form.content = '';
          // 在对话框显示后初始化编辑器
          this.$nextTick(() => {
            this.initQuillEditor();
          });
        },
        // 鼠标移入
        commentEnter(index) {
          this.showIndex = index;
        },
        // 鼠标移出
        commentLeave() {
          this.showIndex = -1;
        },
        // 二级评论鼠标移入
        commentEnter1(index) {
          this.showIndex1 = index;
        },
        // 二级评论鼠标移出
        commentLeave1() {
          this.showIndex1 = -1;
        },
        // 删除评论
        commentDel(id) {
          this.$confirm('是否删除此评论？')
            .then(_ => {
              axios.post(this.baseUrl + 'forum/delete', [id]).then(res => {
                if (res.data && res.data.code == 0) {
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                    duration: 1500,
                    onClose: () => {
                      this.getDetail();
                    }
                  });
                }
              });
            }).catch(_ => {});
        },
        // 回复评论
        replyClick(id) {
          this.form.parentid = id;
          this.dialogFormVisible = true;
          // 清空编辑器内容
          this.form.content = '';
          // 在对话框显示后初始化编辑器
          this.$nextTick(() => {
            this.initQuillEditor();
          });
        },
        addForum(formName) {
          let sensitiveWords = "";
          let sensitiveWordsArr = [];
          if (sensitiveWords) {
            sensitiveWordsArr = sensitiveWords.split(",");
          }
          for (var i = 0; i < sensitiveWordsArr.length; i++) {
            //全局替换
            var reg = new RegExp(sensitiveWordsArr[i], "g");
            //判断内容中是否包括敏感词
            if (this.form.content.indexOf(sensitiveWordsArr[i]) > -1) {
              // 将敏感词替换为 **
              this.form.content = this.form.content.replace(reg, "**");
            }
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.form.avatarurl = localStorage.getItem('frontHeadportrait') ? localStorage.getItem('frontHeadportrait') : '';
              axios.post(this.baseUrl + 'forum/add', this.form,{
                headers: {
                  'Token': localStorage.getItem("Token")
                }
              }).then(res => {
                if (res.data.code == 0) {
                  this.$message({
                    type: 'success',
                    message: '评论成功!',
                    duration: 1500,
                    onClose: () => {
                      this.form.content = '';
                      this.getDetail();
                      this.closeDialog();
                    }
                  });
                }
              });
            } else {
              return false;
            }
          });
        },
        // 关闭对话框并清理资源
        closeDialog() {
          // 关闭对话框
          this.dialogFormVisible = false;
          // 确保富文本编辑器被销毁
          if (this.quill) {
            // 解绑事件监听
            this.quill.off('text-change');
            this.quill = null;
          }
        }
      }
    });
  </script>
</body>
</html>
